<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../../../../assets/common/common.css" />
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../../../../assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./monthlyStatistics.css" />
    <script src="./js/echarts.min.js"></script>
    <title>月度统计</title>
  </head>
  <body>
    <div class="monthlyStatistics-index">
      <!-- 头部 -->
      <div class="header bg-fff flex jc-sb aic">
        <div class="l">
          <i onclick="fanhui()" class="iconfont icon-zuojiantou"></i>
        </div>
        <div class="c tac">月度统计</div>
        <div onclick="yueli()" class="r">打卡月历</div>
      </div>
      <!-- 用户名 -->
      <div class="username bg-fff flex">
        <div class="avatar">
          <img src="./img/__80px_u3817.png" alt="" />
        </div>
        <div class="text-c mr-10 fdc jc-sa">
          <div class="name">吴珊珊</div>
          <div class="group">考勤组：销售一组</div>
        </div>
        <div class="text-r flex jc-fe">
          <div onclick="tongji()" class="text fdc jc-sb aic">
            <i class="iconfont icon-tongji"></i>
            <span>统计</span>
          </div>
          <div onclick="guize()" class="text ml-20 fdc jc-sb aic">
            <img src="./img/u3828.png" alt="" />
            <span>考勤规则</span>
          </div>
        </div>
      </div>
      <!-- 数据图 -->
      <div class="dataGraph bg-fff mt-10">
        <div class="t">
          <div class="date">
            <i class="iconfont icon-xiangzuojiantou"></i>
            <span>2020年1月</span>
            <i class="iconfont icon-jiantou"></i>
          </div>
        </div>
        <div class="echart">
          <div id="echartMain" class="echartMain"></div>
        </div>
      </div>
      <!-- 数据文字 -->
      <div class="dataText bg-fff mt-10 flex fww jc-sb">
        <div class="list">
          <div class="t">应出勤天数</div>
          <div class="b">30 <span>天</span></div>
        </div>
        <div class="list">
          <div class="t">实际出勤天数</div>
          <div class="b">30 <span>天</span></div>
        </div>
        <div class="list">
          <div class="t">应出勤时长</div>
          <div class="b">240 <span>h</span></div>
        </div>
        <div class="list">
          <div class="t">实际出勤时长</div>
          <div class="b">240 <span>h</span></div>
        </div>
        <div class="list">
          <div class="t">迟到次数</div>
          <div class="b"><span class="hong">3</span> <span>次</span></div>
        </div>
        <div class="list">
          <div class="t">早退次数</div>
          <div class="b"><span class="hong">3</span> <span>次</span></div>
        </div>
        <div class="list">
          <div class="t">缺勤天数</div>
          <div class="b">0 <span>天</span></div>
        </div>
        <div class="list"></div>
        <div class="list"></div>
      </div>
    </div>
    <script src="./monthlyStatistics.js"></script>
  </body>
</html>
